<!-- 不带分页的表格，自带高度、带左侧勾选框 -->
<template>
  <div class="mcTableIndex">
    <div class="mcTableList">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        ref="table"
        :height="tableHeight ? tableHeight : 'calc(100vh - 167px)'"
        @selection-change="handleSelectionChange"
        :row-style="{ height: '40px' }"
        :cell-style="{ padding: '0' }"
      >
        <!-- 是否开启选择框 :selectable="selectable" begin -->
        <el-table-column type="selection" width="40"> </el-table-column>
        <!-- 是否开启选择框 end -->
        <el-table-column label="序号" align="center" width="60" fixed>
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <!-- 列头有合并的情况 -->
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width ? item.width : 'auto'"
          :align="item.align ? item.align : 'center'"
          v-for="(item, index) in tableColumn"
          :key="index + getRandom()"
        >
          <template slot-scope="scope">
            <slot :name="scope.row[item.prop]" :params="scope.row">
              {{ getValue(item, scope.row) }}
            </slot>
          </template>
          <div v-if="item.children && item.children.length > 0">
            <el-table-column
              :prop="child.prop"
              :label="child.label"
              :width="child.width ? child.width : 'auto'"
              :align="child.align ? child.align : 'center'"
              v-for="(child, cIndex) in item.children"
              :key="cIndex + getRandom()"
            >
              <template slot-scope="scope">
                <slot :name="scope.row[child.prop]" :params="scope.row">
                  {{ getValue(item, scope.row) }}
                </slot>
              </template>
            </el-table-column>
          </div>
        </el-table-column>
        <!-- 字段列展示 end -->
      </el-table>
    </div>
  </div>
</template>

<script>
import { Utility } from "@/libs/utility";
export default {
  props: {
    /** 数据源：这里不确定字段，只要是数组就可以 */
    dataSource: {
      /** 这里不确定字段，只要是数组就可以 */
      type: Array,
      required: true,
    },
    /** 自定义列 */
    tableColumns: {
      /** 格式： [{prop:"",label:"",width:"",children:[{prop:"",label:"",width:""]}] 其中宽度可以不写 */
      type: Array,
      required: true,
    },
    height: {
      /** 格式： [{prop:"",label:"",width:"",children:[{prop:"",label:"",width:""]}] 其中宽度可以不写 */
      type: String,
      required: false,
    },
    selectItems: {
      type: Array,
      required: false,
    },
  },
  computed: {
    tableData() {
      return this.dataSource;
    },
    tableColumn() {
      return this.tableColumns;
    },
    tableHeight() {
      return this.height;
    },
    tableSelect() {
      return this.selectItems;
    },
  },
  watch: {
    tableData(newVal) {
      // 当前选中的值
      const tableSelect = this.tableSelect;
      // 当前表格数据  newVal
      const tableData = this.tableData;
      console.log(
        newVal,
        tableSelect,
        tableData,
        "最终。。。。。。。。。。。1"
      );
      this.$nextTick(() => {
        // setTimeout(() => {
        newVal &&
          newVal.length > 0 &&
          newVal.forEach((item) => {
            if (tableSelect && tableSelect.length > 0) {
              var isTrue = true;
              // 这里的id，有时候大写有时候小写，多加点判断
              if (typeof item.id != "undefined") {
                if (typeof tableSelect[0].id != "undefined") {
                  isTrue = tableSelect.find((t) => t.id == item.id) != null;
                } else {
                  isTrue = tableSelect.find((t) => t.Id == item.id) != null;
                }
              } else {
                if (typeof tableSelect[0].id != "undefined") {
                  isTrue = tableSelect.find((t) => t.id == item.Id) != null;
                } else {
                  isTrue = tableSelect.find((t) => t.Id == item.Id) != null;
                }
              }
              // 这里要判断是否本身就选中了的情况，如果本身选中了，不进行toggle操作
              this.$refs.table.toggleRowSelection(item, isTrue);
            }
          });
        // }, 100)
      });
    },
  },
  data() {
    return {
      multipleSelection: [],
    };
  },
  methods: {
    getRandom() {
      var value = parseInt(Math.random() * 10000000);
      return value;
    },
    selectable(row) {
      if (this.tableSelect && this.tableSelect.length > 0) {
        var isTrue = this.tableSelect.find((t) => t.Id == row.Id) != null;
        console.log(isTrue, "isTrue................");
        return isTrue;
      }
      return false;
    },
    getValue(item, row) {
      const data = item.twoColumns
        ? row[item.twoColumns[0]] + "（" + row[item.twoColumns[1]] + "）"
        : item.dictName
        ? this.getDictValue(item.dictName, row[item.prop])
        : row[item.prop];
      return data;
    },

    getDictValue(dictType, dictValue) {
      let finishValue = dictValue;
      const list = Utility.getDictList(dictType);
      if (
        list &&
        list.length > 0 &&
        typeof dictValue != "undefined" &&
        dictValue != null
      ) {
        const item = list.find((t) => t.value == dictValue);
        if (typeof item != "undefined") {
          finishValue = item.label;
        }
      }
      return finishValue;
    },
    /** 改变选中行的值 */
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("singleHandleSelectionChange", val);
    },
  },
  mounted() {},
};
</script>

<style scoped>
.mcTableIndex {
  margin-top: 10px;
}

.mcTableIndex .mcTableList {
  /* 避免出现滚动条 */
  max-height: calc(100% - 0px);
  height: 100%;
  overflow: hidden;
}
</style>
